<template>
  <div class="wrapper">
    <router-link to="/xinpin">
      <div class="topDiv">
        <img src="../../../../assets/1first/1推荐/laba.png" alt="">
        <span>新品上市 促销大庆</span>
      </div>
    </router-link>
    <div class="bottomDiv">
      <router-link to="/wangduanhuo">
        <div class="duanhuo">
          <img src="../../../../assets/1first/1推荐/xianshiduanhuo.png" alt="">
        </div>
      </router-link>
      <div class="jingpin">
        <div class="jingpinTop"><img src="../../../../assets/1first/1推荐/jingpin.png" alt=""></div>
        <router-link to="/hot">
          <div class="jingpinBottom"><img src="../../../../assets/1first/1推荐/chaozhiremai.png" alt=""></div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
</script>
<style scoped>
  .wrapper{
    background: #fff;
    margin-top: 0.44rem;
  }
  .topDiv{
    padding: 0.36rem 0.44rem;
    font-size: 0.67rem;
    border: 1px solid #ccc;
  }
  .topDiv img{
    width: 0.67rem;
  }
  .bottomDiv{
    padding: 0.22rem;
    display: flex;
    border-bottom: 1px solid #ccc;
  }
  .duanhuo{
    width: 6.91rem;
    border-right: 1px solid #ccc;
    flex: none;
  }
  .duanhuo img{
    width: 100%;
  }
  .jingpin{
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 0.09rem;
  }
  .jingpin div{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .jingpin .jingpinTop{
    border-bottom: 1px solid #ccc;
  }
  .jingpin div img{
    width: 73%;
  }
</style>
